<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验文件</title>
  <style>
    #qq{
      border:2px solid red;
      width:1000px;
      overflow:hidden;
      position:relative;
    }
    #hh{
      background-color:blue;
      position:absolute;
      width:100px;
      height:100px;
      top:0;
    }
    #tt{
      border:4px solid blue;
      float:right;
      width:100px;
      height:200px;
    }
    #tt img{
      width:100%
    }
    #t1{
      width:100px;
      height:100px;
      margin:0 auto;
      position:relative;
      background:red;
    }
    #t1-1{
      width:50px;
      height:50px;
      left:10px;
      top:10px;
      margin-top:100px;
      position:absolute;
      background:blue;
    }
  </style>
</head>
<body>
<div id="qq">
  <span>hahhh</span>
  <div id="hh">小块绝对定位</div>
</div>
<div id="tt">
  <img src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/c6db5ce7c728e0a7e1c0c242e2c4cb8b.jpg" alt="">
</div>

<div id="t1">
 <div id="t1-1">1号子元素</div>
</div>
<div style="height:100px">hhhh</div>
<hr>
<div style="display:flex">
    <div >2</div>
    <div style="flex:2;background:green">2</div>
    <div style="flex:2;background:yellow">2</div>
</div>
<script>
  let hh=document.getElementById("hh");
  let t11=document.getElementById("t1-1");
  let t1=document.getElementById("t1");
  let blues="blue";
  t1.onmouseenter=function(){
     // alert("成功");//证明mouseover会冒泡，即使触发其子元素，也会触发他的mouseover事件。
      if(hh.style.backgroundColor==="blue"){//不知道这个为什么等于flase
        alert("chengg");
         hh.style.backgroundColor ='pink';
         //alert("hhh")
      }
      else{
     hh.style.backgroundColor ='green';
        alert(123)
      }
    //  console.log(hh.style.backgroundColor==="blue")flase

    // hh.style.backgroundColor = hh.style.backgroundColor ==='blue'?'yellow':'blue'//这段代码可以正常运行
    //   console.log(hh);
    // console.log(typeof hh.style.backgroundColor)



  };
  var a=[{imgUrl:'http://img1.qunarzz.com/sight/source/1505/9f/7d45cc38259e0.jpg_r_640x214_156f4299.jpg',id:1,title:"西溪公园周家园",desc:"风景好",price:"70元"},
    {imgUrl:"http://img1.qunarzz.com/sight/source/1505/bc/83feb2e003d0dd.jpg_r_640x214_0b7269b8.jpg",id:2,title:"西溪湿地",desc:"美丽风景",price:"80元"} ,
    {imgUrl:'http://img1.qunarzz.com/sight/source/1505/4e/3e87ee62e59cdb.jpg_r_640x214_fe6cc902.jpg',id:3,title:"千岛湖",desc:"千岛湖风景",price:"76元"},
    {imgUrl:"http://img1.qunarzz.com/sight/source/1505/c1/1178c5696fcf57.jpg_r_640x214_a69542c6.jpg",id:4,title:"杭州植物园",desc:"植物之美",price:"40元"},
    {imgUrl:"http://img1.qunarzz.com/sight/source/1811/52/b6776b49d27025.jpg_r_640x214_35ae205c.jpg",id:5,title:"西溪湿地",desc:"湿地之美",price:"5元"},
    {imgUrl:"http://img1.qunarzz.com/sight/p0/1903/e0/e0e0c6ca274ad49aa3.img.jpg_600x330_70691c22.jpg",id:6,title:"西溪湿地",desc:"湿地之美",price:"5元"},
  ]
  console.log(JSON.stringify(a))

</script>

</body>
</html>
